<template>
  <div>
    <div class="dialog" v-if="isShowAddDialog">
      <form>
        <p>
          姓名 <input type="text" v-model="addForm.name">
        </p>
        <p>
          年龄 <input type="text" v-model="addForm.age">
        </p>
        <p>
          性别 <input type="radio" v-model="addForm.gender" value="1"> 男
          <input type="radio" v-model="addForm.gender" value="2"> 女
        </p>
        <p>
          <button type="button" @click="addSave">确定</button>
          <button type="button" @click="isShowAddDialog = false">取消</button>
        </p>
      </form>
    </div>

    <div class="dialog" v-if="isShowEditDialog">
      <form>
        <input type="text" v-show="false" v-model="editForm.id">
        <p>
          姓名 <input type="text" v-model="editForm.name">
        </p>
        <p>
          年龄 <input type="text" v-model="editForm.age">
        </p>
        <p>
          性别 <input type="radio" v-model="editForm.gender" value="1"> 男
          <input type="radio" v-model="editForm.gender" value="2"> 女
        </p>
        <p>
          <button type="button" @click="editSave">确定</button>
          <button type="button" @click="isShowEditDialog = false">取消</button>
        </p>
      </form>
    </div>


    <button @click="isShowAddDialog = true">添加</button>
    <table border="1">
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="li in userLists" :key="li.id">
          <td>{{ li.id }}</td>
          <td>{{ li.name }}</td>
          <td>{{ li.age }}</td>
          <td>{{ genderCode[li.gender] }}</td>
          <td>
            <button @click="deleteUser(li.id)">删除</button>
            <button @click="edit(li.id)">编辑</button>
          </td>
        </tr>
      </tbody>
    </table>
    <ul class="pages">
      <li v-if="page !== 1" @click="page--">←</li>
      <li v-for=" i in totalPages" :key="i" @click="page = i" :class="{ active: page === i }">{{ i }}
      </li>
      <li v-if="page < totalPages" @click="page++">→</li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios';
const request = axios.create({
  baseURL: 'http://127.0.0.1:8081'
});
export default {
  data() {
    return {
      isShowAddDialog: false,
      isShowEditDialog: false,
      addForm: {
        name: '',
        age: '',
        gender: 1
      },
      editForm: {
        id: '',
        name: '',
        age: '',
        gender: 1
      },
      totalConnt: 0,
      page: 1,
      genderCode: {
        1: "男",
        2: "女"
      },
      userLists: []
    };
  },
  watch: {
    page() {
      this.getUsers();
    }
  },
  computed: {

    totalPages() {
      return Math.ceil(this.totalConnt / 3);
    }
  },
  created() {
    this.getUsers();
  },
  methods: {
    async edit(id) {
      this.isShowEditDialog = true;
      // 获取回填信息
      const { data } = await request.get(`/users/${id}`);

      this.editForm.id = data.id;
      this.editForm.name = data.name;
      this.editForm.age = data.age;
      this.editForm.gender = data.gender;
    },
    async editSave() {
      await request.patch(`/users/${this.editForm.id}`, {
        name: this.editForm.name,
        age: this.editForm.age,
        gender: this.editForm.gender,
      });

      // 关闭对话框
      this.isShowEditDialog = false;

      // 刷新页面
      this.getUsers();
    },
    async addSave() {
      await request.post('/users', { name: this.addForm.name, age: this.addForm.age, gender: this.addForm.gender });
      // 关闭对话框
      this.isShowAddDialog = false;
      // 重置表单
      this.addForm = { name: '', age: '', gender: 1 };
      // 刷新页面
      this.getUsers();
    },
    async deleteUser(id) {
      if (confirm('确定删除吗?') === false) return;
      await request.delete(`/users/${id}`);
      this.getUsers();
    },
    async getUsers() {
      const { data, headers } = await request.get('/users', {
        params: {
          _page: this.page,
          _limit: 3,
          _sort: 'id',
          _order: 'desc',
        }
      });
      this.totalConnt = headers['x-total-count'];
      this.userLists = data;
    }
  },
};
</script>
<style lang="scss">
.pages {
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  list-style: none;
  margin-top: 20px;

  li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: solid;
    margin-right: 5px;
    cursor: pointer;

    &:hover {
      background: yellow;
    }

    &.active {
      background: yellow;
    }
  }
}

.dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;

  form {
    background: white;
    padding: 10px;
  }
}
</style>